<!--下拉选项组件 -->
<template>
  <div class="content-dropDownOptions">
    <div class="name">{{ title }}</div>
    <el-select v-model="value" :placeholder="`${PLEASE_SELECT}${title}`">
      <el-option v-for="item in optionValue" :key="item" :label="item" :value="item" />
    </el-select>
  </div>
</template>

<script setup>
const PLEASE_SELECT = "请选择"; //下拉选项前缀
const props = defineProps({
  //标题
  title: {
    type: String,
    required: true,
  },
});
//下拉值
const value = defineModel("value", {
  type: String,
  required: true,
});
//选项值
const optionValue = defineModel("optionValue", {
  type: Array,
  required: true,
});
</script>

<style scoped lang="less">
.content-dropDownOptions {
  padding: 20px 0;
  //公共标题
  .name {
    font-size: 18px;
    color: #351d1d;
    font-weight: 400;
    margin-bottom: 14px;
  }
  :deep(.el-select) {
    width: 100%;
    height: @InputHeight;
    input {
      font-size: 18px;
      &:placeholder-shown {
        font-size: 18px;
        color: #b1b1b1;
        font-weight: 400;
      }
    }
    .el-select__wrapper {
      min-height: @InputHeight;
    }
  }
}
</style>
